@use './variables.scss' as *;

// 移动端特定样式优化

// 触摸优化
@media (hover: none) and (pointer: coarse) {
  // 移除悬停效果，优化触摸体验
  .hover-lift:hover {
    transform: none;
  }
  
  .card-shadow:hover {
    box-shadow: var(--shadow-sm);
  }
  
  // 增大可点击区域
  .touch-target {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  // 移动端专用按钮样式
  .btn-mobile {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    
    &:active {
      transform: scale(0.98);
    }
  }
}

// 移动端断点样式
@include respond-below(md) {
  // 容器调整
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .page-container {
    padding: var(--spacing-md);
  }
  
  // 页面头部移动端优化
  .page-header {
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    
    .header-left {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-md);
    }
    
    .header-info h1 {
      font-size: var(--font-size-2xl);
    }
    
    .header-actions {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      
      .el-button {
        flex: 1;
        min-width: 100px;
      }
    }
  }
  
  // 统计卡片移动端优化
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
  
  .stat-card {
    padding: var(--spacing-lg);
    
    .stat-icon {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }
    
    .stat-number {
      font-size: var(--font-size-xl);
    }
  }
  
  // 表单元素移动端优化
  .el-form-item {
    margin-bottom: var(--spacing-xl);
    
    .el-form-item__label {
      font-size: var(--font-size-base);
      line-height: var(--line-height-normal);
    }
  }
  
  .el-input {
    .el-input__inner {
      height: 44px;
      font-size: var(--font-size-base);
    }
  }
  
  .el-textarea {
    .el-textarea__inner {
      font-size: var(--font-size-base);
      line-height: var(--line-height-relaxed);
    }
  }
  
  // 导航菜单移动端优化
  .mobile-nav {
    .el-menu {
      border-right: none;
      
      .el-menu-item {
        height: 50px;
        line-height: 50px;
        font-size: var(--font-size-base);
        
        &.is-active {
          background: var(--primary-color);
          color: #fff;
          
          &::before {
            display: none;
          }
        }
      }
    }
  }
  
  // 卡片网格移动端优化
  .grid-responsive {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .card-item {
    .card-image {
      height: 200px;
    }
    
    .card-content {
      padding: var(--spacing-lg);
      
      h3 {
        font-size: var(--font-size-lg);
        line-height: var(--line-height-snug);
      }
      
      p {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-normal);
      }
    }
  }
  
  // 对话框移动端优化
  .el-dialog {
    margin: var(--spacing-lg);
    width: calc(100vw - #{var(--spacing-2xl)});
    max-width: none;
    
    .el-dialog__header {
      padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
      
      .el-dialog__title {
        font-size: var(--font-size-lg);
      }
    }
    
    .el-dialog__body {
      padding: 0 var(--spacing-lg) var(--spacing-lg);
    }
    
    .el-dialog__footer {
      padding: var(--spacing-lg);
      
      .el-button {
        flex: 1;
        margin-left: var(--spacing-sm);
        
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  
  // 抽屉组件移动端优化
  .el-drawer {
    .el-drawer__body {
      padding: var(--spacing-lg);
    }
  }
  
  // 表格移动端优化
  .mobile-table {
    .el-table {
      .el-table__header {
        display: none;
      }
      
      .el-table__body {
        .el-table__row {
          display: block;
          border: 1px solid var(--border-color);
          border-radius: var(--radius-lg);
          margin-bottom: var(--spacing-lg);
          padding: var(--spacing-lg);
          
          .el-table__cell {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-light);
            padding: var(--spacing-sm) 0;
            
            &:last-child {
              border-bottom: none;
            }
            
            &::before {
              content: attr(data-label);
              font-weight: var(--font-weight-semibold);
              color: var(--text-secondary);
              min-width: 100px;
            }
          }
        }
      }
    }
  }
  
  // 分页移动端优化
  .el-pagination {
    .el-pagination__sizes,
    .el-pagination__jump {
      display: none;
    }
    
    .el-pager {
      .number {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
      }
    }
  }
  
  // 面包屑移动端优化
  .el-breadcrumb {
    .el-breadcrumb__item {
      .el-breadcrumb__inner {
        font-size: var(--font-size-sm);
        
        &.is-link {
          font-weight: var(--font-weight-normal);
        }
      }
    }
  }
  
  // 标签页移动端优化
  .el-tabs {
    .el-tabs__header {
      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            .el-tabs__item {
              height: 44px;
              line-height: 44px;
              padding: 0 var(--spacing-lg);
              font-size: var(--font-size-base);
            }
          }
        }
      }
    }
  }
}

// 小屏幕设备优化 (480px 以下)
@include respond-below(sm) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    .header-info h1 {
      font-size: var(--font-size-xl);
    }
  }
  
  // 超小屏幕下的表单优化
  .el-form {
    .el-form-item {
      .el-form-item__label {
        margin-bottom: var(--spacing-xs);
        line-height: var(--line-height-normal);
      }
      
      .el-form-item__content {
        .el-input,
        .el-select,
        .el-date-editor {
          width: 100%;
        }
      }
    }
  }
  
  // 按钮组优化
  .button-group {
    flex-direction: column;
    gap: var(--spacing-sm);
    
    .el-button {
      width: 100%;
      margin-left: 0;
    }
  }
  
  // 卡片内容调整
  .card-content {
    .item-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--spacing-md);
      
      .meta-info {
        width: 100%;
      }
      
      .item-actions {
        width: 100%;
        justify-content: center;
      }
    }
  }
}

// 横屏移动设备优化
@media screen and (max-height: 600px) and (orientation: landscape) {
  .page-header {
    padding: var(--spacing-md) var(--spacing-lg);
    
    .header-info h1 {
      font-size: var(--font-size-lg);
      margin-bottom: 0;
    }
    
    .header-info p {
      display: none;
    }
  }
  
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
    
    .stat-card {
      padding: var(--spacing-md);
      
      .stat-content {
        .stat-number {
          font-size: var(--font-size-lg);
        }
        
        .stat-label {
          font-size: var(--font-size-xs);
        }
      }
    }
  }
}

// iOS Safari 专用优化
@supports (-webkit-touch-callout: none) {
  // 修复 iOS 中的滚动问题
  .scrollable {
    -webkit-overflow-scrolling: touch;
  }
  
  // 修复 iOS 中的输入框样式
  .el-input__inner {
    -webkit-appearance: none;
    border-radius: var(--radius-md);
  }
  
  // 修复 iOS 中的按钮样式
  .el-button {
    -webkit-appearance: none;
    border: none;
  }
}

// 高对比度模式支持
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --text-secondary: #000000;
  }
  
  .card {
    border: 2px solid var(--border-color);
  }
  
  .el-button {
    border: 2px solid currentColor;
  }
}

// 减少动画模式支持
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .fade-in,
  .fade-in-up,
  .fade-in-down,
  .slide-in-left,
  .slide-in-right,
  .pulse {
    animation: none;
  }
}
